<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CDNBye videojs5 demo</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <style>
        #main {
            margin: 40px auto;
            width: 1000px;
        }
    </style>
</head>

<link href="http://vjs.zencdn.net/5.19.2/video-js.css" rel="stylesheet">
<script src="http://vjs.zencdn.net/5.19.2/video.js"></script>
<!-- increase browser support with MSE polyfill -->
<script src="http://unpkg.com/videojs-contrib-media-sources@4.4.4/dist/videojs-contrib-media-sources.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/cdnbye@latest"></script>
<script src="https://cdn.jsdelivr.net/npm/cdnbye@latest/dist/videojs-contrib-hlsjs.min.js"></script>

<body>
<div id="main">
    <video id="player" class="video-js vjs-default-skin" height="360" width="640" controls preload="none">
        <source src="https://video-dev.github.io/streams/x36xhzz/url_2/193039199_mp4_h264_aac_ld_7.m3u8"
                type="application/x-mpegURL"/>
    </video>
    <!--<div style="font-size: 20px; float: right; margin: 10px auto">-->
        <div style="float: left; font-size: 20px;  margin: 10px auto">
            <p id="downloadInfo" ></p>
            <p id="peerInfo"></p>
        </div>
        <button id="button"  style="float: right; background-color: cornflowerblue; color: white; font-size: 20px;  margin: 10px auto">Simulate A Peer</button>

    <!--</div>-->
    <table class="table table-hover" style="border: 0; margin: 0">
        <thead>
        <tr style="text-align: center">
            <td width="30" style="margin: 0">sn</td>
            <td width="470" style="margin: 0">url</td>
            <td width="100">size</td>
            <td width="20">source</td>
        </tr>
        </thead>
    </table>
    <div class="sr-only cpm-downloadresult"  style="height:360px; overflow:auto;">

        <!--<p class="help-block">Downloading...</p>-->
        <table id="table-body" class="table table-hover">
            <tbody ></tbody>
        </table>
    </div>
</div>
<script>
    //view

    var cpm = {
        downloadresult: document.querySelectorAll('.cpm-downloadresult')[0],
        table: document.querySelectorAll('#table-body tbody')[0]
    };
    var  addToTable = function (sn, url, downloaded, source) {
        cpm.table.innerHTML +=
            `<tr style="text-align: center">
                    <td>${sn}</td>
                    <td>${url}</td>
                    <td>${downloaded} B</td>
                    <td>${source}</td>
                </tr>`
    };

    //controller
    var player = videojs('#player', {
        autoplay: true,
        html5: {
            hlsjsConfig: {
                debug: false,
                // Other hlsjsConfig options provided by hls.js
                p2pConfig: {
                    logLevel: true,
                    // Other p2pConfig options provided by CDNBye
                }
            }
        }
    });
    var peerId = '', peerNum = 0;
    player.tech_.on(Hls.Events.MANIFEST_LOADED, function (e) {
        player.tech_.sourceHandler_.hls.loadLevel = 0;
        cpm.downloadresult.classList.remove('sr-only');
    });

    player.tech_.on(Hls.Events.FRAG_LOADED, function (e, data) {
        var frag = data.frag;
        var source = undefined;
        if (frag.loadByHTTP === true || frag.loadByHTTP === undefined) {
            source = 'HTTP';
        } else if (frag.loadByP2P === true) {
            source = 'P2P';
        }
        addToTable(frag.sn, frag.relurl, frag.loaded, source);
    });
    player.tech_.sourceHandler_.hls.engine.on('stats', function ({totalHTTPDownloaded=0, totalP2PDownloaded=0, totalP2PUploaded=0}) {
//        console.warn(`totalHTTPDownloaded ${totalHTTPDownloaded} totalP2PDownloaded ${totalP2PDownloaded}`)
        var total = totalHTTPDownloaded + totalP2PDownloaded;
        document.querySelector('#downloadInfo').innerText = `p2p ratio: ${Math.round(totalP2PDownloaded/total*100)}%,  saved traffic: ${totalP2PDownloaded}KB, uploaded data: ${totalP2PUploaded}KB`;
    });
    player.tech_.sourceHandler_.hls.engine.on('peerId', function (id) {
        peerId = id;
        document.querySelector('#peerInfo').innerText = `peerId: ${peerId}, peers: ${peerNum}`;
    });
    player.tech_.sourceHandler_.hls.engine.on('peers', function (peers) {
        peerNum = peers.length;
        document.querySelector('#peerInfo').innerText = `peerId: ${peerId}, peers: ${peerNum}`;
    });
    document.getElementById('button').addEventListener('click', function () {
        window.open("http://cdnbye.gitee.io/hlsjs-p2p-engine/videojs-demo.html");
    })
</script>
</body>
</html>
